<template>
  <div class="research-achievements">
    <h3>{{ title }}</h3>
    <el-tabs type="border-card">
      <el-tab-pane
          v-for="type in achievementTypes"
          :key="type.value"
          :label="type.label"
      >
        <el-table :data="filteredAchievements(type.value)" stripe>
          <el-table-column prop="title" label="成果标题" width="220" />
          <el-table-column prop="publishDate" label="发表时间" width="120" />
          <el-table-column prop="description" label="详细描述" />
          <el-table-column label="证明文件" width="120">
            <template #default="{ row }">
              <el-link
                  :href="row.certificate"
                  target="_blank"
                  type="primary"
              >
                查看证明
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import type Resume from "./cv";

const props = defineProps<{
  achievements: Resume['researchAchievements']
  title: string
}>()

const achievementTypes = [
  { label: '全部', value: 'all' },
  { label: '专利', value: '专利' },
  { label: 'SCI', value: 'SCI' },
  { label: 'EI', value: 'EI' },
  { label: '其他', value: '其他' }
]

const filteredAchievements = (type: string) => {
  if (type === 'all') return props.achievements
  return props.achievements.filter(item => item.type === type)
}
</script>